<!DOCTYPE HTML>
<html>
<head>
    <!--申明当前页面的编码集-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--网页标题-->
    <title>HTML5移动端开发模板</ title>
        <!--网页关键词-->
        <meta name="keywords" content="" />
        <!--网页描述-->
        <meta name="description" content="" />
        <!--适配当前屏幕-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <!--禁止自动识别电话号码-->
        <meta name="format-detection" content="telephone=no" />
        <!--禁止自动识别邮箱-->
        <meta content="email=no" name="format-detection" />
        <!--iphone中safari私有meta标签,
         允许全屏模式浏览,隐藏浏览器导航栏-->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!--iphone中safari顶端的状态条的样式black(黑色)-->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style type="text/css">
            /*reset 重置*/
            body,
            ul,
            ol,
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            dl,
            dd,
            form,
            input,
            textarea,
            td,
            th,
            button,
            strong,
            em,
            select,
            video,
            canvas {
                margin: 0;
                padding: 0;
            }

            li {
                list-style: none;
                vertical-align: top;
            }

            table {
                border-collapse: collapse;
            }

            textarea {
                resize: none;
                overflow: auto;
            }

            img {
                border: none;
                vertical-align: middle;
            }

            em {
                font-style: normal;
            }

            a {
                text-decoration: none;
            }

            a,
            input {
                -webkit-appearance: none;
                /*屏蔽阴影*/
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                /*ios android去除自带阴影的样式*/
            }

            a,
            img {
                /* 禁止长按链接与图片弹出菜单 */
                -webkit-touch-callout: none;

            }

            html,
            body {
                /* 禁止选中文本(如无文本选中需求,此为必选项) */
                -webkit-user-select: none;
                user-select: none;
            }

            /*public*/
            html {
                font-size: 20px;
            }

            @media only screen and (min-width: 401px) {
                html {
                    font-size: 25px !important;
                }
            }

            @media only screen and (min-width: 428px) {
                html {
                    font-size: 26.75px !important;
                }
            }

            @media only screen and (min-width: 481px) {
                html {
                    font-size: 30px !important;
                }
            }

            @media only screen and (min-width: 569px) {
                html {
                    font-size: 35px !important;
                }
            }

            @media only screen and (min-width: 641px) {
                html {
                    font-size: 40px !important;
                }
            }

            body {
                font-family: "Helvetica Neue", Helvetica, "STHeiTi", sans-serif;
                overflow-x: hidden;
                overflow-y: auto;
                font-size: 0.7rem;
            }

            .clear {
                zoom: 1;
            }

            .clear:after {
                content: '';
                display: block;
                clear: both;
            }

            .fl {
                float: left;
            }

            .fr {
                float: right;
            }

            .viewport {
                max-width: 640px;
                margin: 0 auto;
                overflow-x: hidden;
            }
        </style>
</head>
<body>
    <div>
        <div>这是一个移动端开发模板哟 !</div>
    </div>
    <script>
        //js适配方案
        //参考地址https://www.duanliang920.com/learn/web/html5/316.html
        (function (doc, win) {
            var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                    var clientWidth = docEl.clientWidth;
                    if (!clientWidth) return;
                    docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
                };
            if (!doc.addEventListener) return;
            win.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        })(document, window);
    </script>
</body>
</html>